@import "common";

@include hostfull;

#rotate {
  perspective: 800px;

  &:hover {
    & > div {
      transform: rotateY(180deg);
    }
  }
}

.front,
.back {
  backface-visibility: hidden;
  @apply rounded-lg;
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-image: linear-gradient(195deg, rgba(66, 66, 74, 0.5), rgba(25, 25, 25, 0.5));
    @apply rounded-lg;
  }
}

.swiper-button-prev,
.swiper-button-next {
  width: 15%;

  img {
    filter: invert(1) grayscale(100);
  }

  &:after {
    display: none;
  }
}
